<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>内容管理</title>
<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/res/third/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
		.lpdiv{display: inline-block;float: left;margin-left: 220px;margin-top: 15px;width: 100%;}
		.showimgs{display:inline-block;}
		.delimgas{display:inline-block;margin-left:50px;cursor:pointer;}
	#proTable td {
		padding: 0 5px;
	}
</style>

</head>
<body>
<div id="app">
    <div class="panel panel-info" style="height: 100%;overflow-y:scroll;">
	       <div class="panel-heading">
	          <h3 class="panel-title">[#if hotFloor??]编辑[#else]添加[/#if]天天爆品</h3>
	        </div>
        <div class="panel-body" style="overflow: hidden;border-bottom: none;">
			<form class="form-horizontal" role="form" id="mainForm">
			  <input type="hidden" name="id" value="[#if hotFloor??]${hotFloor.id!}[/#if]">
			  <div class="form-group" style="margin-top:15px;">
			    <label for="title" class="col-sm-2 control-label">所在楼层:</label>
			    <div class="col-sm-5"> 
			        <select name="floor">
			        [#list allFloors as floors]  
			        	<option value="${floors}" [#if hotFloor?? && hotFloor.floor == floors]selected[/#if]>${floors}</option>
			        [/#list]	
			        </select> 
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label">所属类目:</label>
			    <div class="col-sm-5">
                    <select name="categoryId" id="categoryId">
                        <option value="">请选择</option>
						[#list topCategoryList as cate]
                            <option value="${cate.id!}" [#if hotFloor?? && hotFloor.categoryId == cate.id]selected[/#if]>${cate.name!}</option>
						[/#list]
					</select>
			    </div>
			  </div>
			  
			 <div class="form-group">
			    <label for="title" class="col-sm-2 control-label" >选择商品:</label>
			    <div class="col-sm-10">
					<table id="proTable">
						[#if hotFloor??]
							[#list hotFloor.hotProductList as pro]
                                <tr>
                                    <td>
                                        <input type="text" placeholder="序号" name="seq" style="width: 45px; text-align: center;" value="${pro.seq!}">
                                    </td>
                                    <td>
                                        <input type="hidden" name="productId" value="${pro.productId!}">
                                        <input type="text" placeholder="选择商品" onclick="chooseProduct(this)" name="productName" style="cursor: pointer;" readonly value="${pro.productName!}">
                                    </td>
                                    <td>
                                        <input type="date" placeholder="开始时间" name="starttime" required="required" value="${pro.starttime?date!}"> - <input type="date" placeholder="结束时间" name="endtime" required="required" value="${pro.endtime?date!}">
                                    </td>
                                    <td>
										[#if pro_index == 0]
                                        	<span style="font-size:30px;cursor:pointer" onclick="addProduct()">+</span>
										[#else]
											<span style="font-size:30px;cursor:pointer" onclick="$(this).parents('tr').remove()">删除</span>
										[/#if]
                                    </td>
                                </tr>
							[/#list]
						    [#else]
                                <tr>
                                    <td>
                                        <input type="text" placeholder="序号" name="seq" style="width: 45px; text-align: center;">
                                    </td>
                                    <td>
                                        <input type="hidden" name="productId">
                                        <input type="text" placeholder="选择商品" onclick="chooseProduct(this)" name="productName" style="cursor: pointer;" readonly>
                                    </td>
                                    <td>
                                        <input type="date" placeholder="开始时间" name="starttime" required="required"> - <input type="date" placeholder="结束时间" name="endtime" required="required">
                                    </td>
                                    <td>
                                        <span style="font-size:30px;cursor:pointer" onclick="addProduct()">+</span>
                                    </td>
                                </tr>
						[/#if]
					</table>
			    </div>
             </div>
			 
			 <div class="form-group" style="margin-top: 10px;">
					<div style="margin-left:300px;">
						<button onclick="insert();" type="button" class="btn btn-info">立即提交</button>
					</div>
			</div>
			</form>
        </div>
        
      </div>
      
     
     
     <div style="display: none;width: 600px;" id="providerDiv">
      		<div style="border: 1px solid #ddd;padding-bottom: 8px;">
      			<div>
      				<input style="display: inline-block;width: 160px;height: 30px;margin: 8px;" type="text" class="form-control" id="so_companyname" placeholder="请输入公司名字" name="so_companyname">
      				<button type="button" class="btn btn-info btn-xs delbtn" onclick="searchProvider()">查询</button>
      			</div>
      			<table class="table table-hover table-bordered table-striped table-condensed" id="companyTab" style="margin-bottom: 8px;">
					<tr id="ftr">
						<th width="50%">商品名称</th>
						<th width="50%">来源公司</th>
					</tr>
				</table>
				<div style="text-align: right;padding-right: 8px;">
					<button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageUp()">上一页</button>
					<button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageNext()">下一页</button>
				</div>
      		</div>
      		<input id="pageNo" type="hidden" value="1">
      		<input id="pageTotal" type="hidden">
      		<input id="so_companyname_back" type="hidden">
      </div>
</div>
      
<script type="text/html" id="productTemplate">
    <tr>
        <td>
            <input type="text" placeholder="序号" name="seq" style="width: 45px; text-align: center;">
        </td>
        <td>
            <input type="hidden" name="productId">
            <input type="text" placeholder="选择商品" onclick="chooseProduct(this)" name="productName" style="cursor: pointer;" readonly>
        </td>
        <td>
            <input type="date" placeholder="开始时间" name="starttime" required="required"> - <input type="date" placeholder="结束时间" name="endtime" required="required">
        </td>
        <td>
            <span style="font-size:30px;cursor:pointer" onclick="$(this).parents('tr').remove()">删除</span>
        </td>
    </tr>
</script>

<script src="/res/third/laytpl/laytpl.js"></script>
<script>
      function addProduct(){
          $('#proTable').append($('#productTemplate').html());
      }
      
      function removeProduct(obj){
    	  $(obj).parents("tr").remove();
      }
      
    
        //立即提交按钮
     		$.each($('#proTable tr'), function(i, v) {
     			var $seqInput = $(v).find('input[name$=seq]');
     			var $productId = $(v).find('input[name$=productId]');
     			$seqInput.prop('name', 'productList[' + i + '].seq');
     			$productId.prop('name', 'productList[' + i + '].productId');
     		});
     		
     	function insert() {
			var floor = $('select[name=floor]').val();
			var categoryId = $('#categoryId').val();
			if(categoryId == '') {
				alert('请选择类目');
				return;
			}
			var isOk = true;
			$.each($('#proTable tr'), function() {
                var productId = $(this).find('input[name$=productId]').val();
                var seq = $(this).find('input[name$=seq]').val();
				var starttime = $(this).find('input[name$=starttime]').val();
                var endtime = $(this).find('input[name$=endtime]').val();
				if(seq == '' || productId == '' || starttime == '' || endtime == '') {
					alert('请输入完整信息');
					isOk = false;
					return false;
				}
			});
			if(isOk) {
                $.each($('#proTable tr'), function(i, v) {
                    var $productId = $(v).find('input[name$=productId]');
                    var $seqInput = $(v).find('input[name$=seq]');
                    var $starttime = $(v).find('input[name$=starttime]');
                    var $endtime = $(v).find('input[name$=endtime]');
                    $seqInput.prop('name', 'hotProductList[' + i + '].seq');
                    $productId.prop('name', 'hotProductList[' + i + '].productId');
                    $starttime.prop('name', 'hotProductList[' + i + '].starttime');
                    $endtime.prop('name', 'hotProductList[' + i + '].endtime');
                });

                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/hotfloor/saveHotProduct.do",
                    data: $("form").serialize(),
                    success: function (aj) {
                        if (aj.success) {
                            location.reload();
                            alert(aj.msg);
                        }
                    }
                });
            }
     	}

      	var index;
     	var dialogAddCom;
     	function chooseProduct(obj) {
			if($('#categoryId').val() == '') {
				alert('请先选择类目');
				return;
			}
			index = $(obj).parents('tr').index();
     		dialogAddCom = art.dialog({
     		        title: "选择商品",
     		        lock:true,
     		        content: document.getElementById('providerDiv')
     		    });
     		initProvider(1);
     	}

     	function initProvider(pageNo,so_companyname){
     		 art.dialog.post({
     				url : '/hotfloor/chooseproduct.do',
     				data : {
     					pageNo : pageNo,so_companyname:so_companyname, so_categoryFId : $('#categoryId').val()
     				},
     				success : function(data){
     					if(data.success){
     						$("#ftr").nextAll().remove();
     						var productList=data.attributes.productList;
     						for (var i = 0; i < productList.length; i++) {
     							$("#companyTab").append("<tr>"
     												        +"<td  style='cursor: pointer;' onclick='sendBackCName("+productList[i].id+",\""+productList[i].name+"\" )' >"+productList[i].name+"</td>"
     												        
     												        +"<td>"+productList[i].companyName+"</td>"
     												   +"</tr>");	
     						}
     						
     						$("#pageTotal").val(data.attributes.totalPage);
     						$("#pageNo").val(data.attributes.pageNo);
     						$("#so_companyname_back").val(data.attributes.so_companyname)
     					}else{
     						error_msg(data.msg , function(){location.reload();});
     					}
     				}
     		 
     		},"数据初始化中.... ");
     		 
     	}

     	function sendBackCName(cid,cname){
			$("#proTable tr").eq(index).find('input[name$=productName]').val(cname);
			$('#proTable tr').eq(index).find('input[name$=productId]').val(cid);
     		 dialogAddCom.close();
     	}

     	function searchProvider(){
     		var so_companyname=$("#so_companyname").val();
     		initProvider(1,so_companyname);
     	}

     	function pageUp(){
     		var pageNo=$("#pageNo").val();
     		pageNo=parseInt(pageNo);
     		if(pageNo!=1){
     			 pageNo=pageNo-1;
     		}
     		var so_companyname=$("#so_companyname_back").val();
     		initProvider(pageNo,so_companyname);
     	}
     	function pageNext(){
     		var pageNo=$("#pageNo").val();
     		var pageTotal=$("#pageTotal").val();
     		pageNo=parseInt(pageNo);
     		if(pageNo!=pageTotal){
     			 pageNo=pageNo+1;
     		}
     		var so_companyname=$("#so_companyname_back").val();
     		initProvider(pageNo,so_companyname);
     	}
     	    	
</script>
</body>
</html>